<template>
	<div class="indexContainer">
		<!-- <div class="search-flex">
			<div class="search">
				<input type="text" placeholder="搜索我的商品" v-model="keyword" @keyup.enter="getGoodList">
			</div>
			<div class="s-btn">搜索</div>
		</div> -->
		<div class="assort-con" v-show="alertShow > 0">
			<div class="ac">
				<div class="ac-list">
					<div class="ac-ul" v-if="alertShow === 1">
						<div class="ac-li" @click="changeGame(item.id)" :class="{ active: gameId === item.id }"
							v-for="(item, index) in gameList" :key="index">{{
					item.name }}</div>
					</div>
					<div class="ac-ul" v-else>
						<div class="li recruit" :class="{ active: status === 1 }" @click="changeStatus(1)">进行中</div>
						<div class="li apply" :class="{ active: status === 2 }" @click="changeStatus(2)">已结束</div>
					</div>
				</div>
				<div class="ac-btns">
					<div class="btn" @click="clearSelect()">清空</div>
					<div class="btn" @click="getActivity()">确认</div>
				</div>
			</div>
			<div class="close-bg" @click="alertShow = 0"></div>
		</div>
		<div class="index-con">
			<div class="assort-btns">
				<div class="choose-type" :class="{ active: alertShow === 1 }" @click="changeWin(1)">游戏类型</div>
				<div class="choose-status" :class="{ active: alertShow === 2 }" @click="changeWin(2)">状态类型</div>
			</div>
			<div class="list-con">
				<div class="m-title">最新活动</div>
				<div class="list">
					<div class="li" v-for="item in activityList" :key="item.id">
						<div class="logo">
							<img :src="item.picUrl" alt="">
						</div>
						<div class="con">
							<div class="title">{{ item.title }}</div>
							<div class="time">活动时间：{{ item.beginTime }}-{{ item.endTime }}</div>
							<div class="btns" v-if="item.status === 1">
								<div class="btn">招募中</div>
								<div class="btn" @click="toActivity(item)">立即申请</div>
							</div>
							<div class="btns" v-else>
								<div class="btn no">已结束</div>
								<div class="btn no" @click="toActivity(item)">立即申请</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script setup>
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useActivityApi } from '/@/api/activity';

const activityList = ref([]);
const pageNo = ref(1);
const pageSize = ref(100)
const gameId = ref(0)
const status = ref(0)
let canfilter = true;
async function getActivity() {
	if (!canfilter) return false;
	canfilter = false;
	const res = await useActivityApi().actList({
		pageNo: pageNo.value,
		pageSize: pageSize.value,
		gameId: gameId.value,
		status: status.value,
	});
	if (res) {
		activityList.value = [...res.data.list];
		alertShow.value = 0;
	}

	canfilter = true;

}
function toActivity(data) {
	router.push({ path: '/activity/all/detail', query: { id: data.id } })
}

const alertShow = ref(0)
const gameList = ref([
	{ id: 1, name: '游戏名称1' },
	{ id: 2, name: '游戏名称2' },
	{ id: 3, name: '游戏名称3' },
])
function changeWin(num) {
	if (alertShow.value === num) {
		alertShow.value = 0
	} else {
		alertShow.value = num
	}
}
function changeGame(gid) {
	gameId.value = gid;
}
function changeStatus(sid) {
	status.value = sid;
}

function clearSelect() {
	gameId.value = 0;
	status.value = 0;
}
onMounted(() => {
	getActivity();
})


</script>
<style scoped lang="scss">
@mixin bg($name) {

	background:url(../assets/images/#{$name}.png) no-repeat center top;
	background-size: 100% auto;
}

@mixin wh($w, $h) {
	width:#{$w}px;
	height: #{$h}px;
}


.indexContainer {
	width: 100%;
}

.search-flex {
	width: 100%;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px auto;

	.search {
		width: 292px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 15px;
		border-radius: 14px;
		background: #ffffff;

		&:before {
			content: "";
			width: 15px;
			height: 15px;
			background: url(../assets/images/ass.png) no-repeat center;
			background-size: 100%;
			margin-right: 8px;
		}

		input {
			width: 250px;
			height: 28px;
			line-height: 28px;
			color: rgb(184, 184, 184);
			font-size: 12px;
			background: none;
			outline: 0;
		}
	}

	.s-btn {
		width: 60px;
		height: 28px;
		line-height: 28px;
		color: white;
		font-size: 16px;
		text-align: center;
		cursor: pointer;
	}
}


.index-con {
	margin: 10px auto 0;
	padding-bottom: 50px;
	background: rgb(245, 245, 245);
}

.assort-btns {
	width: 100%;
	height: 40px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	position: relative;

	&::after {
		content: "";
		background: rgb(184, 184, 184);
		width: 1px;
		height: 18px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	div {
		width: 180px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(116, 116, 116);
		font-size: 16px;
		cursor: pointer;

		&::after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			margin-left: 5px;
			background: url(../assets/images/ax.png) no-repeat center;
			background-size: 100%;
		}

		&.active {
			color: red;

			&::after {
				background-image: url(../assets/images/as.png);
			}
		}
	}
}

.list-con {
	width: 100%;
	margin: 0 auto;
	background: rgb(255, 255, 255);
	box-sizing: border-box;
	padding: 10px 22px 5px;
	height: calc(100vh - 152px - 75px);
	overflow: auto;
	display: block;

	.li {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 12px;
	}

	.m-title {
		box-sizing: border-box;
		height: 32px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgb(16, 16, 16);
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 3px;

		&::before {
			content: "";
			height: 18px;
			width: 1px;
			background: rgb(255, 37, 37);
			display: block;
			margin-right: 8px;
		}
	}

	.logo {
		width: 66px;
		height: 95px;
		background: rgb(22, 130, 254);
		border-radius: 5px;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.con {
		width: 250px;
		margin-left: 12px;
	}

	.title {
		color: rgb(62, 66, 73);
		font-size: 16px;
		line-height: 24px;
		height: 24px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.time {
		color: rgb(62, 66, 73);
		font-size: 12px;
		line-height: 28px;
		height: 32px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		color: rgb(146, 146, 176);
	}

	.btns {
		height: 35px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;

		.btn {
			width: 72px;
			height: 35px;
			line-height: 35px;
			border-radius: 2px;
			display: flex;
			color: #ffffff;
			background: rgb(233, 157, 66);
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-right: 15px;

			&.no {
				background: rgb(187, 187, 187);
			}

			&+.btn {
				background: rgb(255, 191, 51);
			}
		}
	}
}

.assort-con {
	position: fixed;
	top: 0;
	left: 0;
	height: calc(100% - 142px - 75px);
	top: 142px;
	z-index: 3;
	width: 100%;

	.close-bg {
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	.ac {
		position: relative;
		z-index: 2;
		background: rgb(239, 239, 239);
		width: 100%;
		padding-bottom: 20px;

		.ac-list {
			padding-top: 15px;
			min-height: 150px;
			max-height: 400px;
			box-sizing: border-box;

		}

		.ac-ul {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 0 10px;
			flex-wrap: wrap;
		}

		.ac-li {
			box-sizing: border-box;
			padding: 0 8px;
			height: 30px;
			line-height: 28px;
			border: 1PX solid rgb(116, 116, 116);
			color: rgb(116, 116, 116);
			font-size: 14px;
			margin: 0 12px 12px 0;
			border-radius: 5px;
			cursor: pointer;

			&.active {
				border-color: rgb(231, 56, 34);
				color: rgb(231, 56, 34);
			}
		}

		.li {
			box-sizing: border-box;
			width: 100px;
			height: 30px;
			line-height: 28px;
			background: rgb(158, 158, 158);
			font-size: 14px;
			margin: 0 25px 12px 0;
			text-align: center;
			border-radius: 5px;
			color: #ffffff;
			border: 1PX solid rgb(158, 158, 158);
			display: block;
			cursor: pointer;

			&:nth-child(3) {
				margin-right: 0;
			}


			&.recruit {
				background: rgb(233, 157, 66);
				border-color: rgb(233, 157, 66);
			}

			&.apply {
				background: rgb(129, 179, 55);
				border-color: rgb(129, 179, 55);
			}

			&.active {
				border-color: rgb(231, 56, 34) !important;
			}

		}

		.ac-btns {
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				background: rgb(221, 221, 221);
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: rgb(0, 0, 0);
				font-size: 14px;
				width: 140px;
				border-radius: 18px;
				margin: 0 20px;
				cursor: pointer;

				&+.btn {
					background: rgb(231, 56, 34);
					color: #ffffff;
				}
			}
		}
	}
}
</style>